<template>
  <div class="home">
    <el-container style="height: 100vh; border: 1px solid #eee">
      <el-header style="text-align: right; font-size: 12px">
        <div class="title">管理系统</div>
        <el-dropdown @command="handleCommand">
          <div class="avatarWrapper">
            <img class="avatar" src="../assets/logo.png" alt="" />
            <span class="username">admin</span>
            <i class="el-icon-arrow-down" style="margin-right: 15px"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="quit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1']" default-active="1">
            <el-menu-item index="1">
              <template slot="title"><i class="el-icon-house"></i>首页</template>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-s-data"></i>
              <span slot="title">景区设施</span>
            </el-menu-item>
            <el-menu-item index="3">
              <template slot="title"><i class="el-icon-truck"></i>景区车流量</template>
            </el-menu-item>
            <el-menu-item index="4">
              <template slot="title"><i class="el-icon-s-custom"></i>管理员</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main> Main </el-main>
      </el-container>
    </el-container>
    <AMap v-if="false"></AMap>
  </div>
</template>

<script>
// @ is an alias to /src
import AMap from '@/components/AMap'
export default {
  name: 'Home',
  data() {
    return {
      map: null
    }
  },
  components: {
    AMap
  },
  mounted() {
    // this.getTestInfo()
  },
  methods: {
    handleCommand(command) {
      if (command === 'quit') {
        window.localStorage.setItem('token', '')
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style lang="scss">
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 24px;
  }
  .avatarWrapper {
    display: flex;
    align-items: center;
    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      box-shadow: 5px 1px 10px #ccc;
    }
    .username {
      margin: 0 20px;
    }
  }
}
.el-aside {
  padding: 0 10px;
  .el-menu-item {
    height: 40px;
    line-height: 40px;
    margin-top: 20px;
  }
}
</style>
